<template>
    <div class="dialong" v-show="visible">
        <!-- 阴影盒子 -->
        <div class="mask" @click="maskout"></div> <!-- 中间盒子 -->
            <div class="dialong-content" :style={width:width,height:height}>
            <!-- 标题 -->
             <div class="dialong-title">
                <p>{{title}}</p>
                <button>
                    <i class="fa fa-plus" @click="colsemask">×</i>
                </button>
             </div>
            <!-- 中间内容 -->
            <div class="dialong-main">
                <!-- 使用插槽 -->
                <slot name="main" ></slot>
            </div>
            <!-- 尾部部分 -->
            <div class="dialong-footer">
                <slot name="footer">
                </slot>
            </div>
         </div>
      

    </div>
</template>
<script>
export default {
    // 对外扩展 的属性
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title:{
            type: String,
            default: '默认内容'
        },
        // 宽度
        width: {
            type: String,
            default: "50%"
        },
        // 高度
        height: {
            type: String,
            default: "50%"
        
         },
   
    },
    name:"dialong",
    data() {
        return {
            //封装组件：1.先写布局结构样式 2.考虑对外扩展哪些属性(弹框组件：标题,宽，高，是否显示隐藏等) 3.变成子组件形式 ,外部传这些属性 4.写方法
            // 弹框组件-可配置标题,宽，高等属性
        }
    },
    methods: {
        // 点击开关
        maskout(){
            this.$emit('maskout',!this.visible )
        },
        // 点击关闭
        colsemask(){
            this.$emit('colsemask',!this.visible )
        }
    },
}
</script>
<style lang="scss" scoped>
.dialong{
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0000006f;
        animation: black1 2s linear   forwards;
    }
    .dialong-content{
        // width: 600px;
        // height: 400px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 10px;
        padding: 15px 20px;
        box-sizing: border-box;
        // margin: 200px auto;
        z-index: 2;
         animation: dialogs 2s linear   forwards;
        .dialong-title{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #333;
            font-weight: bold;
             display: flex;
             justify-content: space-between;
             margin-bottom: 30px;
             button{
                border: none;
                background: none;
                font-size: 20px;
             }
        }
        .dialong-footer{
        //   定位在下面
        position: absolute;
        bottom: 25px;
         right: 25px;
        }
    }
}

// 自定义动画
@keyframes black1{
    from{
        opacity: .8;
    }
    to{
        opacity: .5;
    }
    
}

@keyframes dialogs{
    from{
        opacity: 0.3;
    }
    to{
        opacity: 1;
    }
}
</style>

